<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="评论编号"
        prop="comment.id"
      >
      </el-table-column>
      <el-table-column
        label="文章标题"
        prop="article.title"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <el-table-column
        label="发送评论用户"
        prop="user.username"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <!--细品TAT-->
      <el-table-column
        label="接收评论用户"
        prop="user.signature"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <el-table-column
        label="评论内容"
        prop="comment.comment"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <el-table-column
        label="评论时间"
        prop="comment.date">
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入发送评论用户名字搜索"
            @keyup.enter.native ="searchKey"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            @click="open(scope.row)">删除<i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="page"></Page>
    <Result ref="result"></Result>
    <Identity ref="legal"></Identity>
  </div>
</template>

<script>
import Page from '../base/Page'
import Result from '../base/MessageResult'
import Identity from './identity'
export default {
  name: 'Comment_list',
  components: {Page, Result, Identity},
  data () {
    return {
      tableData: [{}],
      search: '',
      pageSize: 3
    }
  },
  mounted () {
    this.$refs.legal.isLegal()
    // 加载分页数据、分页条
    this.$refs.page.showPage('comment', 1, this.pageSize)
    this.$refs.page.showPagination('comment')
    this.$refs.page.type = 'comment'
  },
  methods: {
    open (row) {
      var r = this
      this.confirm = '确定'
      this.$confirm('确定删除该评论吗', '提示', {
        confirmButtonText: this.confirm,
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).then(
        () => {
          if (!r.confirm.includes('确定', 0)) {
            return
          }
          this.handleDelete(row)
        }
      )
    },
    handleDelete (row) {
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/deleteComment?id=' + row.comment.id)
        .then(function (response) {
          if (response.data === 1) {
            that.$refs.result.success('删除评论成功')
          } else {
            that.$refs.result.success('删除评论失败')
          }
          that.$refs.page.showPage('comment', that.$refs.page.currentPage, that.pageSize)
          that.$refs.page.showPagination('comment', that.pageSize)
        })
    },
    searchKey () {
      if (this.search === '') {
        this.$refs.page.showPage('comment', 1, this.pageSize)
        return
      }
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/findComment?name=' + that.search)
        .then(function (response) {
          that.tableData = response.data
        })
    }
  }
}
</script>

<style scoped>

</style>
